<template>
  <v-container>
    <v-layout row wrap>
      <v-flex md11 lg9 xl6 mx-auto>
        <index-carousel></index-carousel>
        
        <!-- <v-toolbar > -->
          <v-tabs 
            centered
            slider-color="red"
            v-model="model" >
            <v-tab v-for="item in tabList" :key="item.key" :href="`#tab-${item.key}`">
              <v-icon>{{item.icon}}</v-icon><div class="mx-2"></div>{{item.label}}
            </v-tab>
            
          </v-tabs>
        <!-- </v-toolbar> -->

        <v-tabs-items v-model="model">
          <v-tab-item v-for="item in tabList" :key="item.key" :id="`tab-${item.key}`" >
            <index-product></index-product>
            
      
          </v-tab-item>
        </v-tabs-items>


      </v-flex>

      <v-flex xl6 offset-xl1>
        <v-card dark color="red">
          <v-card-text>xs10 offset-xs1</v-card-text>
        </v-card>
      </v-flex>


    


      


      
    </v-layout>
  </v-container>
</template>



<script>
import IndexCarousel from './pages/Index/Carousel';
import IndexProduct from './pages/Index/Product';

export default {
  components: {
    IndexCarousel,
    IndexProduct,
  },
  data() {
    return {
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
      aaa: '',
      tabList: [
        { key: 4, value: 'new_arrival', label:'New Arrival', icon: 'favorite_border' },
        { key: 3, value: 'all', label: 'All Products', icon: 'view_module' },
        { key: 1, value: 'sty', label: 'Style', icon: 'turned_in' },
        { key: 2, value: 'cate', label: 'Category', icon: 'view_list' },
      ],
      model: 'tab-4',
    }
  },

  
}
</script>

<style >

.sd-image-loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
